<template>
  <el-row>
    <el-card style="width: 32vw;min-width: 600px;height: 78vh">
      <template #header>
        境界列表
      </template>
      <el-table :data="cultivations" style="width: 100%">
        <el-table-column fixed prop="cultivationLevel" label="境界名称" width="100" align="center"
                         header-align="center"/>
        <el-table-column prop="spiritualRootLimit" label="灵根上限" width="100" align="center" header-align="center"/>
        <el-table-column prop="coreAttribute" label="核心属性" width="120" align="center" header-align="center"/>
        <el-table-column prop="constitution" label="体" width="120" align="center" header-align="center"/>
        <el-table-column fixed="right" label="操作" width="100" align="center" header-align="center">
          <template #default="scope">
            <el-button link type="primary" size="small"
                       @click="currentCultivation=scope.row;cultivationUpdateVisible=true">编辑
            </el-button>
            <el-button link type="primary" size="small" @click="deleteCultivation(scope.row)">删除</el-button>

          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <el-card style="width: 23vw;height: 78vh;min-width:300px;margin-left: 10px">
      <template #header>
        新增境界
      </template>
      <el-form :model="newCultivation" label-width="100px" class="center-button-form">
        <el-form-item label="境界名称：">
          <el-input v-model="newCultivation.cultivationLevel"></el-input>
        </el-form-item>
        <el-form-item label="灵根上限：">
          <el-input v-model="newCultivation.spiritualRootLimit"></el-input>
        </el-form-item>
        <el-form-item label="核心属性：">
          <el-input v-model="newCultivation.coreAttribute"></el-input>
        </el-form-item>
        <el-form-item label="体：">
          <el-input v-model="newCultivation.constitution"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addCultivation">新增境界</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </el-row>

  <el-dialog v-model="cultivationUpdateVisible" title="编辑境界" width="30%">
    <span>
      <el-form :model="currentCultivation" label-width="100px" class="center-button-form">
        <el-form-item label="境界名称：">
          <el-input v-model="currentCultivation.cultivationLevel"></el-input>
        </el-form-item>
        <el-form-item label="灵根上限：">
          <el-input v-model="currentCultivation.spiritualRootLimit"></el-input>
        </el-form-item>
        <el-form-item label="核心属性：">
          <el-input v-model="currentCultivation.coreAttribute"></el-input>
        </el-form-item>
        <el-form-item label="体：">
          <el-input v-model="currentCultivation.constitution"></el-input>
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cultivationUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="updateCultivation">
          保存
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {http} from "api/axios.js";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  setup() {
    const cultivations = ref()
    const newCultivation = ref({
      "cultivationLevel": "",
      "spiritualRootLimit": "",
      "coreAttribute": "",
      "constitution": ""
    })

    const currentCultivation = ref()
    const cultivationUpdateVisible = ref(false);


    const getAllCultivations = () => {
      http.get("/cultivation/all")
          .then((response) => {
            cultivations.value = response.data['data'];
          })
          .catch((error) => {
            console.error('请求出错:', error);
          });
    }
    const addCultivation = function () {
      http.post("/cultivation/add", newCultivation.value).then((response) => {
        console.log(response);
        ElMessage({
          type: 'success',
          message: '添加成功',
        })
        getAllCultivations()
      })
    }
    const deleteCultivation = function (cultivation) {
      ElMessageBox.confirm('确定删除吗', '删除境界', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        http.post("/cultivation/delete", cultivation).then((response) => {
          console.log(response);
          getAllCultivations()
        })
        ElMessage({
          type: 'success',
          message: '删除成功',
        })
      })

    }
    const updateCultivation = function () {
      http.post("/cultivation/update", currentCultivation.value).then((response) => {
        console.log(response);
        getAllCultivations()
      })
      cultivationUpdateVisible.value = false;
      getAllCultivations()
    }


    getAllCultivations()
    return {
      cultivations,
      newCultivation,
      addCultivation,
      deleteCultivation,

      currentCultivation,
      cultivationUpdateVisible,
      updateCultivation
    }
  }
}
</script>

<style scoped>
.center-button-form {
  align-items: center;
}
</style>